<template>
  <van-popup 
    v-model="show" 
    position="right" 
    @click-overlay="clickOverlay" 
    class="my-popup">
    <van-collapse v-model="activeName" accordion @change="changeCollapseItem" class="my-collapse">
      <van-collapse-item :title="item.label" :name="index" v-for="(item, index) in data" :key="index">
        <van-radio-group v-model="selectName[activeName]">
          <van-radio
            v-for="(items,indexs) in item.children"
            :key="indexs"
            :name="items.value"
            class="my-radio"
          >{{items.label}}</van-radio>
        </van-radio-group>
      </van-collapse-item>
    </van-collapse>
    <div class="screening-btn">
      <van-button type="primary" round size="large" @click="resetFunc">重置</van-button>
      <van-button type="info" round size="large" @click="recordCheck">确认</van-button>
    </div>
  </van-popup>
</template>

<script type='textecmascript-6'>
export default {
  data() {
    return {
      show: false,
      activeName: 0, //默认展开第一个
      // data: [
      //   {label: '哈哈', children: [
      //     {label: 'hahaha', value: 'ttt'},
      //     {label: 'afgagsdg', value: 'grh'},
      //     {label: 'dfjrt', value: 'jye'}
      //   ]},
      //   {label: 'gah', children: [
      //     {label: 'hahaha', value: 'ttt'},
      //     {label: 'afgagsdg', value: 'grh'},
      //     {label: 'dfjrt', value: 'jye'}
      //   ]}
      // ],
      selectName: []
    };
  },
  props: {
    showPopup: {
      type: Boolean,
      default: false
    },
    data: {
      type: Array,
      default: function(){return []}
    }
  },
  created() {
    this.show = this.showPopup
    for (let i=0; i<this.data.length; i++) {
      this.selectName[i] = ''
    }
  },
  methods: {
    /**
     * @name 切换折叠面板时触发
     * @param {string | array} activeNames
     */
    changeCollapseItem(activeNames) {
      
    },
    // 重置
    resetFunc() {
      this.activeName = 0
      this.selectName = []
      for (let i=0; i<this.data.length; i++) {
        this.selectName[i] = ''
      }
    },
    resetSelectName(data) {
      for (let i=0; i<data.length; i++) {
        if (data[i] !== '') {
          this.selectName[i] = data[i]
        }
      }
    },
    //确认
    recordCheck() {
      this.$emit("sure", this.selectName);
      this.show = false;
      this.$emit("showPopup", false);
    },
    /**
     * 点击遮罩层时触发
     */
    clickOverlay() {
      this.show = false;
      this.$emit("showPopup", false);
    }
  },
  watch: {
    showPopup(val) {
      this.show = val
    }
  }
};
</script>
<style>
@import "~@/assets/css/resetVant.css";
.my-popup{
    height: 100%;
    width: 70%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background-color: white;
}
.my-popup .van-cell{
    display: flex;
    align-items: center;
    height: 88px;
    font-size: 30px;
    padding: 20px 40px;
}
.my-popup .van-cell__left-icon, .my-popup .van-cell__right-icon{
    font-size: 30px;
}
.my-collapse{
    flex: 1;
    overflow-y: auto;
}
.my-collapse .van-collapse-item__content{
    padding: 10px 30px;
    font-size: 30px;
    background-color: #F0F2F5;
    max-height: 800px;
    overflow-y: auto;
}
.my-radio{
    height: 80px;
    display: flex;
    align-items: center;
    /* border-bottom: 1px #E5E5E5 solid;   */
}
.my-radio:last-child{
    border-bottom: 0;
}
.my-radio .van-radio__label{
    margin-left: 30px;
}
.screening-btn{
    display: flex;
    justify-content: space-around;
    margin: 40px 0;
}
.screening-btn .van-button{
    width: 40%;
}
.screening-btn .van-button--primary{
    background-color: #FFBA00;
    border: 1px solid #FFBA00;  /*no*/
}
</style>